import {View, Text, Image} from "@tarojs/components"
import Taro, {getStorageSync, navigateTo, redirectTo, showToast} from "@tarojs/taro"
import "./index.scss"
import {Avatar, Button} from "@nutui/nutui-react-taro";
import {useState} from "react";
import {defaultUser, UserModel, UserType} from "@/shared/services/model/user";
import MyListItem from "@/components/MyListItem"
import balanceIcon from '@/assets/balance.png'
import orderIcon from '@/assets/icon_order.png'
import couponIcon from '@/assets/icon_coupon.png'
import myIcon from '@/assets/icon_my.png'
import aboutIcon from '@/assets/icon_about.png'
import iconManager from '@/assets/icon_manager.png'
import iconMyRecharge from '@/assets/icon_my_recharge.png'
import {loadingService} from "@/shared/utils/loading";
import userService from "@/shared/services/user/user.service";
import {formatBalance} from "@/shared/utils/amountUtil";
import {saveUserInfo} from "@/stores/userStore";

export default function ProfilePage() {

  const [user, setUser] = useState<UserModel>(defaultUser)

  Taro.useDidShow(async () => {
    getUserInfo()
  })

  const getUserInfo = async () => {
    const token = getStorageSync('token')
    if(!token){
      setUser(defaultUser)
      return
    }
    let result = await userService.userInfo({})

    if(result.code == 0){
      setUser(result.data)
      saveUserInfo(result.data)
    }
  }

  // 可以在任何地方调用，不需要Button
  const handleGetUserInfo = async (res) => {
      console.log(res,'用户信息:')
      console.log(res.detail,'用户信息:')
  }

  const checkLogin = () => {
    const token = getStorageSync('token')
    if(!token){
      gotoLogin()
      return false
    }

    return true
  }

  const gotoLogin = async () => {
    const token = getStorageSync('token')

    console.log(`${token}`,"token")
    if(!token){
      navigateTo({ url: '/pages/login/index' })
    }
  }

  // 跳转到管理后台页面
  const toAdminPage = () => {
    if(checkLogin()){
      Taro.navigateTo({
        url: '/pages/admin/index' // 根据你的实际路由路径修改
      })
    }

  }

  // 跳转到个人资料页面
  const toUserInfoPage = () => {
    if(checkLogin()){
      Taro.navigateTo({
        url: '/pages/userinfo/index' // 根据你的实际路由路径修改
      })
    }

  }

  // 跳转到订单页面
  const toOrderPage = () => {
    if(checkLogin()){
      Taro.navigateTo({
        url: '/pages/order/index' // 根据你的实际路由路径修改
      })
    }

  }

  // 跳转到优惠券页面
  const toCouponPage = () => {
    if(checkLogin()){
      Taro.navigateTo({
        url: '/pages/user/coupon/index' // 根据你的实际路由路径修改
      })
    }

  }

  const toQrCode = () => {
    Taro.navigateTo({
      url: '/pages/user/qrcode/index' // 根据你的实际路由路径修改
    })
  }

  const toRechargeList = () => {
    if(checkLogin()){
      Taro.navigateTo({
        url: '/pages/user/rechargeList/index' // 根据你的实际路由路径修改
      })
    }
  }

  return (
    <View className="profile">
      <View className="backgroundArea">
        <Image className="background" src='https://b0.bdstatic.com/ugc/HI5gCuNde0FCBvGX9WGmSw5921912748b2e0a6737e3a1362fa5183.jpg' mode='aspectFill'/>
        <View className="userInfo">
          <View className="avatarContainer" >
            <Image className="avatar" src={require('@/assets/icon_avatar.png')} mode="aspectFill"/>
            <View className="userNameInfo">

              {!user.name && <Button className="userNameBtn"
                                        // openType="getUserInfo"
                                        // onGetUserInfo={handleGetUserInfo}
                                        onClick={gotoLogin}
                                        block={false}
                                        size={"mini"}
                                       >{user.name ? user.name : "立即登录"}</Button>}
              {user.name && <Text className="userName">{user.name}</Text>}

              {user.name && (
                <Text className="userPhone">{user.phone}</Text>
              )}
            </View>

            <View className="qrcode">
              {/*<Image className="qrcodeImage" src={require('@/assets/qrcode.png')} mode="widthFix"/>*/}
              {/*<Button className="qrcodeText"   openType="getUserInfo"*/}
              {/*        onGetUserInfo={handleGetUserInfo} type='warning'>重新授权</Button>*/}
            </View>
          </View>
        </View>
      </View>

      <View className="profile-content">
        <MyListItem
          title="余额"
          money={`${formatBalance(user.balance)}元`}
          icon={balanceIcon} // 在外部使用 require
          iconSize={20}
          showBottomBorder={true}
        />

        <MyListItem
          title="消费记录"
          icon={orderIcon} // 在外部使用 require
          iconSize={20}
          onClick={toOrderPage}
          showArrow={true}
          showBottomBorder={true}
        />

        <MyListItem
          title="充值记录"
          icon={iconMyRecharge} // 在外部使用 require
          iconSize={20}
          onClick={toRechargeList}
          showArrow={true}
          showBottomBorder={true}
        />

        <MyListItem
          title="优惠券"
          value="可用0张"
          onClick={toCouponPage}
          icon={couponIcon} // 在外部使用 require
          showArrow={true}
          showBottomBorder={false}
        />

        <View className="space"></View>

        <MyListItem
          title="个人资料"
          icon={myIcon} // 在外部使用 require
          showArrow={true}
          showBottomBorder={true}
          onClick={toUserInfoPage}
        />

        {/*<MyListItem*/}
        {/*  title="关于囍理运"*/}
        {/*  icon={aboutIcon} // 在外部使用 require*/}
        {/*  showArrow={true}*/}
        {/*  showBottomBorder={iconManager}*/}
        {/*/>*/}
        {user.userType === UserType.ADMIN && (
          <MyListItem
            title="管理后台"
            icon={iconManager} // 如果没有管理员图标就用关于图标
            showArrow={true}
            showBottomBorder={false}
            onClick={toAdminPage}
          />
        )}
      </View>
    </View>
  )
}
